

<!DOCTYPE html>
<html>
<title>MUSIC.club</title>
<?php 
require './common/top.php'
 ?>

<meta name="viewport" content="width=device-width, initial-scale=1">


<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> -->

<body>

<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">

<div class="w3-container w3-padding-32 w3-center w3-opacity w3-margin-bottom">

<div class="w3-content w3-container w3-padding-64">
  <h1 class="w3-center">MV</h1>
  <p class="w3-center"><em>A  sharing Club.</em></p>
<p class="w3-padding-16"><button class="w3-btn" onclick="myFunction()">切换风格</button></p>
</div>

<!-- Photo Grid -->
<div id="myGrid">
  <div class="w3-third">
    <img src="./upload/xzq1.jpg" style="width:100%">
    <img src="./upload/xzq1.jpg" style="width:100%">
    <img src="./upload/xzq1.jpg" style="width:100%">
    <img src="./upload/xzq1.jpg" style="width:100%">
    <img src="./upload/xzq1.jpg" style="width:100%">
    <img src="./upload/xzq1.jpg" style="width:100%">
  </div>

  <div class="w3-third">
    <img src="./upload/bigbang.jpg" style="width:100%">
    <img src="./upload/bigbang.jpg" style="width:100%">
    <img src="./upload/bigbang.jpg" style="width:100%">
    <img src="./upload/bigbang.jpg" style="width:100%">
    <img src="./upload/bigbang.jpg" style="width:100%">
    <img src="./upload/bigbang.jpg" style="width:100%">
  </div>

  <div class="w3-third">
    <img src="./upload/IU1.jpg" style="width:100%">
    <img src="./upload/IU1.jpg" style="width:100%">
    <img src="./upload/IU1.jpg" style="width:100%">
    <img src="./upload/IU1.jpg" style="width:100%">
    <img src="./upload/IU1.jpg" style="width:100%">
    <img src="./upload/IU1.jpg" style="width:100%">
  </div>
  </div>
</div>
<!-- Clear floats -->
<div class="w3-clear"></div><br><br>

<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
  <p class="w3-medium">MADE BY NUTTER</p>
</footer>
<script>
// Toggle grid padding
function myFunction() {
    var x = document.getElementById("myGrid");
    if (x.className.indexOf("w3-row-padding") == -1) {
        x.className += " w3-row-padding";
    } else { 
        x.className = x.className.replace(" w3-row-padding", "");
    }
}

// Open and close sidenav
function w3_open() {
    document.getElementById("mySidenav").style.width = "100%";
    document.getElementById("mySidenav").style.display = "block";
}

function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}
</script>

</body>
</html>
